<template>
  <el-dialog v-model="showDia" v-if="props.showDia" :title="props.title" width="30%" draggable destroy-on-close center :show-close="false"
    :close-on-press-escape="false" :close-on-click-modal="false">
    <el-form label-position="top" ref="ruleFormRef" label-width="100px" :rules="rules" :model="data.tableData"
      style="max-width: 460px; margin-left: 10%;" class="login_form" scroll-to-error="true" size="large">
      <el-form-item class="label" label="类别名称：" prop="c_name">
        <el-input v-model="data.tableData.c_name" />
      </el-form-item>
      <el-form-item label="分类所处等级：" prop="level">
        <el-radio-group v-model="data.tableData.level" class="ml-4">
          <el-radio label="1" size="large">级别1</el-radio>
          <el-radio label="2" size="large">级别2</el-radio>
          <el-radio label="3" size="large">级别3</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="父级分类：" prop="c_parent_id" v-if="data.tableData.level != '1'">
        <el-select v-model="data.tableData.c_parent_id" class="m-2" placeholder="请选择父级分类" :change="xx()">
          <el-option v-for="item in c_parent_id_list" :key="item.c_id" :label="item.c_name" :value="item.c_id" />
        </el-select>
      </el-form-item>
      <el-form-item label="类别描述：" prop="c_info">
        <el-input v-model="data.tableData.c_info" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="ok(ruleFormRef)">提交</el-button>
        <el-button type="primary" @click="esc(ruleFormRef)">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch, reactive, onMounted } from "vue"
import type { FormInstance, FormRules } from 'element-plus'
import { classParentIdListApi, classAddListApi, classListOneApi,classUpdatListApi } from "../composables/http"
import { ElMessage } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const props = defineProps({
  showDia: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    required: true
  },
  nid: {
    type: Number,
    required: true
  }
})
const rules = reactive<FormRules<typeof data.tableData>>({
  c_name: [
    { required: true, message: '请输入类别名称', trigger: 'blur' },
    { min: 1, max: 20, message: 'Length should be 1 to 20', trigger: 'blur' },
  ],
  c_info: [
    { required: true, message: '请输入类别描述', trigger: 'blur' },
    { min: 1, max: 35, message: 'Length should be 1 to 35', trigger: 'blur' },
  ],
  level: [{ required: true, message: '请输入类别等级', trigger: 'blur' }],
})
const data = reactive<{
  tableData:{
    c_name: string,
    c_info: string,
    c_parent_id: number,
    level: string,
  }
}>({
  tableData:{
    c_name: '',
    c_info: '',
    c_parent_id: 0,
    level: '1',
  }
})
const showDia = ref(false)
watch(props, () => {
  showDia.value = props.showDia
  if (props.showDia == true) {
    par_id_list()
  }
  if (props.title == "修改") {
    class_list_one()
  }
})
const class_list_one = async() => {
  const d = await classListOneApi(props.nid)
  data.tableData.c_info = d.data.c_info
  data.tableData.c_name = d.data.c_name
  data.tableData.c_parent_id = d.data.c_parent_id
  data.tableData.level = d.data.level+''
}
const emit = defineEmits(["showDiaf"]);

const c_parent_id_list = ref()

const par_id_list = async () => {
  const d = await classParentIdListApi(data.tableData.level)
  if (d.code == 200) {
    c_parent_id_list.value = d.data
    c_parent_id_list.value.push({
      'c_id': 0,
      'c_name': "无父级"
    })
  }
}

const ok = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      data.tableData.c_parent_id = data.tableData.level == '1' ? 0 : data.tableData.c_parent_id
      const d = props.title != "修改" ? await classAddListApi(data.tableData) : await classUpdatListApi(props.nid,data.tableData)
      if (d.code == 200) {
        emit("showDiaf", false)
        data.tableData = {level: '1'} as any
      }
    } else {
      console.log('验证失败!')
      return false
    }
  })
}
const esc = (formEl: FormInstance | undefined) => {
  emit("showDiaf", false)
}
const xx = () => {
  par_id_list()
}
</script>


<style lang='scss' scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

:deep .el-form-item__content {
  justify-content: center;
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>